<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<view>
					<tm-menubars title="倒计时" color="bg-gradient-blue-accent"  :showback="true"></tm-menubars>
					<tm-sheet :shadow="24">
						<view class="text-size-s text-weight-b mb-24">默认</view>
						<tm-countdown   :time="24*60*60*1000"></tm-countdown>
						<view class="text-size-s text-weight-b my-24">自定义格式</view>
						<tm-countdown format="DD天狗HH时MM分数SS秒哈"  :time="24*60*60*1000"></tm-countdown>
						
						<view class="text-size-s text-weight-b my-24">自定义</view>
						<tm-button size="m" theme="bg-gradient-blue-accent">
							<tm-countdown  :time="60*1000"> 
								<template 
								v-slot:default=" { timeData } ">
									{{ timeData.finish||timeData.data.seconds=='00' ? ' 开始 ' : timeData.data.seconds }} 
								</template> 
							</tm-countdown>
						</tm-button> 
					</tm-sheet>
					<tm-sheet :shadow="24">
						
						<view class="text-size-s text-weight-b my-24">自定义</view>
						<tm-countdown  :time="24*60*60*1000">
							<template 
							v-slot:default=" { timeData } ">
								<view class="flex-center">
									<view v-for="(item,key) in timeData.data" :key="key" class="pa-10 blue  mr-10 round-2" :class="$tm.vx.state().tmVuetify.black?'bk':''">
										{{item}}
									</view>
								</view>
							</template> 
						</tm-countdown>
						
						<view style="height: 36upx;"></view>
						<tm-countdown ref="testCountdown"  :time="24*60*60*1000">
							<template 
							v-slot:default=" { timeData } ">
								<view class="flex-center">
									<view class="pa-10 blue text  round-5" :class="$tm.vx.state().tmVuetify.black?'bk':''">
										{{timeData.data.day}}
									</view>
									<view class="text-size-xxs mx-10">天</view>
									<view class="pa-10 blue text  round-5" :class="$tm.vx.state().tmVuetify.black?'bk':''">
										{{timeData.data.hour}}
									</view>
									<view class="text-size-xxs mx-10">小时</view>
									<view class="pa-10 blue text  round-5" :class="$tm.vx.state().tmVuetify.black?'bk':''">
										{{timeData.data.minutes}}
									</view>
									<view class="text-size-xxs mx-10">分</view>
									<view class="pa-10 blue text  round-5" :class="$tm.vx.state().tmVuetify.black?'bk':''">
										{{timeData.data.seconds}}
									</view>
									<view class="text-size-xxs mx-10">秒</view>
								</view>
							</template> 
						</tm-countdown>
						<view style="height: 36upx;"></view>
						<tm-button @click="$refs.testCountdown.pause()" size="m" font-color="grey" theme="grey" :shadow="0" text icon="icon-pausecircle">暂停</tm-button>
						<tm-button @click="$refs.testCountdown.start()" size="m" font-color="grey" theme="grey" :shadow="0" text icon="icon-playcircle">继续/开始</tm-button>
						<tm-button @click="$refs.testCountdown.stop()" size="m" font-color="grey" theme="grey" :shadow="0" text icon="icon-stopcircle">结束</tm-button>
						<tm-button @click="$refs.testCountdown.resinit()" size="m" font-color="grey" theme="grey" :shadow="0" text icon="icon-redo">重置</tm-button>
					</tm-sheet>
				</view>
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmCountdown from "@/tm-vuetify/components/tm-countdown/tm-countdown.vue"

	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmCountdown},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">

</style>
